<template>

	<h3>{{ msg }}</h3>
	<h3>runoob是什么意思？ run noob！ 奔跑吧，少年！</h3>

	<div v-once>{{'v-once记录count原始值='+ count }}</div>
	<button @click="count++"> count变化值: {{ count }}</button>

	<button :disabled="isButtonDisabled">按钮不可用</button>

	<button @click="reverseMessage">反转字符串：{{message}}</button>

	<div class="title">v-if:如果是多个元素，可以包裹在template>元素上 ， 优先级v-if比v-for高些</div>
	<template v-if="1">
		<span v-for="(item,index) in 3">{{index}}-</span>
	</template>

	<div class="title">v-else-if、v-if、else-if，可以链式的使用多次</div>
	<div v-if="type === 'A'">
		A
	</div>
	<div v-else-if="type === 'B'">
		B
	</div>
	<div v-else-if="type === 'C'">
		C
	</div>
	<div v-else>
		Not A/B/C
	</div>

	<div class="title">v-for 迭代对象</div>
	<template v-for="(value,key,index) in object">
		<li>{{ index }}. {{ key }} : {{ value }}</li>
	</template>

	<div class="title">v-model原理:1.绑定一个value属性,2.绑定input事件</div>
	<input :value="input0" @input="input0=$event.target.value" /><span>{{'input0='+input0}}</span>
	&nbsp;&nbsp;
	<input v-model="input1" @input="input1Func" @change="change1Func" /><span>{{'input1='+input1}}</span>

	<div class="title">lazy修饰符让数据在失去焦点、点击按钮、回车时才去更新值</div>
	<input v-model="input1" @input="input1Func" @change="change1Func" /> <span>{{'input1='+input1}}</span>
	<input v-model.lazy="input2" @input="input2Func" @change="change2Func" />
	<span>{{'lazy.input2='+input2}} <button @click="inputValue">inputValue</button>
	</span>
	<br />
	<input v-model.lazy="input3" />
	<span>{{'watch.input3='+input3}}</span>
	<span><button @click="inputWatch">inputWatch</button></span>

	<div class="title">ref将对象count变成响应式,ref.value=count</div>
	<button @click="count1Add">count1 is: {{ count1 }}</button>

	<div class="title">注册自定义指令-input自动获取焦点</div>
	<input v-focus />

	<div class="title">点击事件冒泡，@click.stop拦截点击事件往父级冒泡传递</div>
	<div v-if="1" @click="ChildPar" style="border: solid;">
		<span @click.stop="Child" style="border: red solid;">Child</span>
	</div>

	<p>Edit <code>components/HelloWorld.vue</code> to test hot module replacement.</p>
</template>

<script>
	import {
		ref
	} from 'vue'
	export default {
		name: 'HelloWorld',
		props: {
			msg: String,
		},
		setup: () => {
			var count1 = ref(3)
			return {
				count1
			}
		},
		data() {
			return {
				count: 0,
				isButtonDisabled: true,
				message: 'Runoob!',
				type: "C",
				object: {
					name: '菜鸟教程',
					url: 'http://www.runoob.com',
					slogan: '学的不仅是技术，更是梦想！'
				},
				input0: '000',
				input1: '111',
				input2: '222',
				input3: '333',
			}
		},
		directives: {
			focus: {
				mounted(el) {
					el.focus()
				}
			}
		},
		watch: {
			// watch进行监听input3值的变化
			input3(newval, oldval) {
				console.log('watch监听-input3-newval=', newval)
			}
		},
		created() {
			//this.count==this.$data.count true
			console.log('this.count', this, this.count, this.$data.count, 'this.count==this.$data.count=', this.count ==
				this.$data.count)
		},
		methods: {
			reverseMessage() {
				this.message = this.message.split('').reverse().join('')
			},
			input1Func(e) {
				console.log('input1Func=', e.target.value, '此时input1=', this.input1)
			},
			change1Func(e) {
				console.log('change1Func=', e.target.value)
			},
			input2Func(e) {
				console.log('input2Func=', e.target.value, '此时input2值没有改变=', this.input2)
			},
			change2Func(e) {
				console.log('change2Func=', e.target.value, '此时input2=', this.input2)
			},
			inputValue() {
				//场景：input输入内容后，立即点击提交按钮，获取lazy的最新值
				// 在表单按钮提交前，检查校验input2的值
				console.log('inputValue', '=此时input2=', this.input2)
				if (this.input2 == '2222') {
					console.log('通过了，this.input2=', this.input2)
				}
			},
			inputWatch() {
				//场景：input输入内容后，立即点击提交按钮，获取watch的最新值
				// 在表单按钮提交前，检查校验input3的值
				console.log('inputValue', '=此时input3=', this.input3)
				if (this.input3 == '3333') {
					console.log('通过了，this.input3=', this.input3)
				}
			},
			count1Add() {
				this.count1++;
			},
			ChildPar() {
				console.log('ChildPar')
			},
			Child() {
				console.log('Child')
			},
		},
	}
</script>

<style>
	.title {
		margin: 22px 0px 8px 0px;
		font-weight: bold;
		font-size: 18px;
		border-bottom: 1px solid #666;
	}
</style>
